﻿$(function () {

    // 1.历史记录渲染
    // let arr = ['小个子', '小大象', '疯吵', '大西瓜']
    // 向本地存储一些历史数据
    // localStorage.setItem('search', JSON.stringify(arr))

    // 渲染封装
    function arrly() {
        // 到本地获取JSON字符串，转成数组 ==》如果有数据取数据没有数据返回空数组
        let his = JSON.parse(localStorage.getItem('search')) || []

        // ajax中使用 ==》 使用模板引擎
        let str = template('tmp', {list: his})
        // 渲染
        $('.search-con').html(str)
    }

    arrly()


    // 2.历史记录清空
    $('.search-con').on('click', '.history-cle', function () {
        // 弹出确认框
        mui.confirm('确定要清空？', '警告!!!', ['不清吧', '丢，清空'], function (e) {

            if (e.index == 1) {
                // 清空
                localStorage.removeItem('search')
                // 重新渲染
                arrly()
            }
        })
    })


    // 3.删除个别记录
    $('.search-con').on('click', '.history-del', function () {
        // 定义一个变量进行下面点击时候的指向this
        let that = this
        // 弹出确认框
        mui.confirm('确定要删除？', '警告!!!', ['不删除吧', '删除'], function (e) {

            if (e.index == 1) {
                // 这个时候要在外面定义一个变量进行this 的存储
                let index = $(that).data('index')
                // console.log(index)

                // 1.去本地获取JSON字符串
                let arr = JSON.parse(localStorage.getItem('search'))
                // 2.从数组进行删除
                arr.splice(index, 1)

                // 3.将数组转成JSON字符串，写入本地
                localStorage.setItem('search', JSON.stringify(arr))

                // 重新渲染
                arrly()
            }
        })
    })


    // 4.添加历史记录
    // 最多存放6条数据
    $('.search-btn').click(function () {
        // 1.获取搜索框的值
        let text = $('.search-txt').val()

        // 判断是否为空
        if (text.trim().length == 0) {
            mui.toast('请输入关键字')
            return
        }

        // 2.去本地获取JSON字符串，转成数组
        let arr = JSON.parse(localStorage.getItem('search'))||[]
        // 3.判断是否重复
        let index = arr.indexOf(text)
        if (index > -1) {
            // 有重复的数据，进行删除再赋值
            arr.splice(index, 1)
        }
        // 4.向数组前面添加数据
        arr.unshift(text)

        console.log(arr)

        // 5.进行判断，如果数组已经有6个数据了进行最后面的删除
        if (arr.length > 6) {
            arr.pop()
        }

        // 6.将数组转成JSON字符串，写入本地
        localStorage.setItem('search', JSON.stringify(arr))
        // 重新渲染
        arrly()

        // 7.清空输入框
        $('.search-txt').val('')

        // 8.跳到搜索列表页，搜素对应商品并显示
        location.href = 'searchList.html?key=' + text
    })

})